<template>
    <div>
        <div class="title">
            <van-icon name="arrow-left" @click="$router.go(-1)"/>
            <span>我的收藏</span>
        </div>
        <div class="count" v-for="count in list" :key="count.id" @click="toPage(count.valueId)">
            <van-image width="120" height="80" :src="count.picUrl"/>
            <div class="item">
                <div class="txt">{{ count.name }}</div>
                <div class="tips">
                    <div class="price">￥{{ count.retailPrice }}</div>
                    <van-button type="danger">取消收藏</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Collect",
        data() {
            return {
                list: null
            }
        },
        methods: {
          toPage(id) {
              this.$router.push({
                  name: 'goodsmsg',
                  query: {
                      id: id
                  }
              })
          }
        },
        async created() {
            const get2 = await this.$get('collect/list', {type: 0})
            this.list = get2.data.data.list
            console.log(get2.data.data)
        }
    }
</script>

<style lang="less" scoped>
  .title {
    position: relative;
    width: 375px;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    text-align: center;

    .van-icon-arrow-left {
      position: absolute;
      left: 0px;
      line-height: 45px;
      margin-left: 11px;
      font-size: 18px;
    }
  }

  .count {
    display: flex;
    flex-direction: row;
    margin-left: 14px;
    margin-top: 24px;
    font-size: 14px;

    .van-image {
      margin-right: 11px;
    }

    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;

      .tips {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .price {
          color: #F60C00;
        }

        .van-button--danger {
          margin-right: 28px;
          width: 80px;
          height: 30px;
          font-size: 12px;
        }
      }
    }
  }
</style>
